<template>
  <div class="classroom">
    <SearchIndex class="classroom-search" :showLeft="false" :width="'2.9rem'">
      <template v-slot:right>
        <div class="search-right">已购买</div>
      </template>
    </SearchIndex>
    <div class="content">
      <div class="tags" v-if="coursetags">
        <div
          class="tag"
          v-for="item in coursetags"
          :key="item.id"
          @click.stop="toTagDetail(item)"
        >
          <div class="img-box">
            <img :src="item.icon" alt="" />
          </div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
      <div
        class="class-item"
        v-for="(item, index) in recommendClass"
        :key="index"
      >
        <TitleItem :title="item.title" :rightText="'更多'" />
        <div class="list-box">
          <div class="class-list">
            <ClassItem
              v-for="classItem in item?.courses"
              :key="classItem.id"
              :classItem="classItem"
            />
          </div>
        </div>
      </div>
      <div class="all-class-list">
        <TitleItem :title="'全部课程'" :rightText="'更多'" />
        <div class="all-class-list-item">
          <ClassItem
            v-for="classItem in allClassList"
            :key="classItem.c.id"
            :classItem="classItem.c"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import SearchIndex from "@/components/search/SearchIndex.vue";
import TitleItem from "@/components/TitleItem.vue";
import ClassItem from "@/components/ClassItem.vue";
export default {
  components: {
    SearchIndex,
    TitleItem,
    ClassItem,
  },
  data: () => {
    return {
      search: "",
      allTags: null,
      coursetags: null,
      recommendClass: [],
      allClassList: [],
      offset: 0,
      end: false,
    };
  },
  methods: {
    toTagDetail(item) {
      localStorage.setItem("tag", item.title);
      this.$router.push({
        name: "classtag",
        params: {
          tagid: item.id,
        },
      });
    },
    // 获取tag标签数据
    getTagsHandler() {
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/app/c`,
        data: qs.stringify({
          cs: '[{"n":"sharetext","v":"20230203"},{"n":"userMenuTutorial"},{"n":"qrcontent","v":"20230203"},{},{"n":"essentialRecipeGuideline"},{"n":"schemeblacklist"},{"n":"coursetags"},{"n":"family","v":"2018041913"},{"n":"profession","v":"2017082501"},{"n":"subscription","v":"20171107"},{"n":"countrycode","v":"2019081401"},{"n":"note"},{"n":"user_channels"},{"n":"stickers","v":"20230203192105"},{"n":"ingredient_units","v":"2020022121"}]',
        }),
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.allTags = res.data.result;
        this.coursetags = res.data.result.coursetags[0].tags;
      });
    },
    getClassInfo() {
      if (this.end) return;
      this.axios({
        method: "post",
        url: `${this.api.baseUrlV2}/course/getcourses/${this.offset}/20`,
        headers: {
          version: this.api.version,
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
        },
      }).then((res) => {
        this.recommendClass = res.data.result.recommend_course;
        this.end = res.data.result.end;
        this.allClassList = [...this.allClassList, ...res.data.result.list];
      });
    },
  },
  created() {
    this.getTagsHandler();
    this.getClassInfo();
  },
};
</script>
<style lang="scss" scoped>
.classroom {
  position: relative;
  width: 100%;
  .classroom-search{
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
  }
  .search-right {
    width: 100% !important;
    height: 100% !important;
    line-height: 0.55rem;
    text-align: center;
    color: var(--text-green);
    margin-left: 0 !important;
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.16rem;
    .tags {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .tag {
        width: 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0.05rem 0;
        .img-box {
          width: 0.3rem;
          height: 0.3rem;
        }
        .title {
          font-size: 0.12rem;
          color: var(--text-black);
        }
      }
    }
    .class-item {
      width: 100%;
      .list-box {
        width: 100%;
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }
        .class-list {
          width: max-content;
          display: flex;
          .item {
            margin-right: 0.1rem;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
    .all-class-list {
      width: 100%;
      .all-class-list-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
      }
    }
  }
}
</style>
